import React from "react";
import { Button as AntdButton } from "antd-mobile";
import "./index.less";

export default function Button({
  children,
  type = "default",
  disabled = false,
  loading = false,
  block = false,
  icon,
  className = "",
  style = {},
  onClick,
  ...rest
}) {
  // 构建样式类名
  const buttonClassName = [
    "cn-button",
    `cn-button-${type}`,
    block ? "cn-button-block" : "",
    className
  ].filter(Boolean).join(" ");

  return (
    <AntdButton
      className={buttonClassName}
      style={style}
      onClick={onClick}
      disabled={disabled}
      loading={loading}
      block={block}
      {...rest}
    >
      {icon && <span className="cn-button-icon">{icon}</span>}
      {children}
    </AntdButton>
  );
}

// 新增：背景图片按钮组件
export function BackgroundButton({
  children,
  type = "primary",
  backgroundImage,
  disabled = false,
  loading = false,
  block = false,
  icon,
  className = "",
  style = {},
  onClick,
  ...rest
}) {
  const buttonClassName = [
    "cn-background-button",
    `cn-background-button-${type}`,
    block ? "cn-background-button-block" : "",
    disabled ? "cn-background-button-disabled" : "",
    loading ? "cn-background-button-loading" : "",
    className
  ].filter(Boolean).join(" ");

  const buttonStyle = {
    backgroundImage: backgroundImage ? `url(${backgroundImage})` : undefined,
    ...style
  };

  return (
    <div
      className={buttonClassName}
      style={buttonStyle}
      onClick={disabled || loading ? undefined : onClick}
      {...rest}
    >
      {loading && <span className="cn-button-loading">⏳</span>}
      {icon && <span className="cn-button-icon">{icon}</span>}
      {children}
    </div>
  );
}

export function ButtonGroup({
  children,
  gap = 12,
  direction = "row",
  equal = true,
  className = "",
  style = {},
}) {
  const groupClass = [
    "cn-button-group",
    direction === "column" ? "cn-button-group-column" : "cn-button-group-row",
    equal ? "cn-button-group-equal" : "",
    className,
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <div
      className={groupClass}
      style={{ gap: typeof gap === "number" ? `${gap}px` : gap, ...style }}
    >
      {children}
    </div>
  );
}
